<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="http://i0.hdslb.com/bfs/archive/616501afa01cfdb9696287b061942fb0771076f8.jpg" /></div>
			<div class="swiper-slide"><img src="http://i0.hdslb.com/bfs/archive/ef020dc04e5c2d756841bd7e7df251fa361a9afe.jpg" /></div>
			<div class="swiper-slide"><img src="http://i0.hdslb.com/bfs/archive/89446c4ca8fdd8d543c191ea9a3281cc2a4340b6.jpg" /></div>
			<div class="swiper-slide"><img src="http://i0.hdslb.com/bfs/archive/44d65caed70e887fc73036b98ddeafd734fc171f.jpg" /></div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
	import Swiper from "swiper";
	export default {
		mounted() {
			this.carousel()
		},
		methods: {
			carousel() {
				var swiper = new Swiper('.swiper-container', {
//					direction: 'horizontal',
					loop: true,
//					speed:2000,
//					autoplayDisableOnInteraction:false,
                    pagination:{el:".swiper-pagination"},
                    paginationClickable:true,
					autoplay: {
						delay: 2000,
						disableOnInteraction: false,
					}
				});
			},
		}
	}
</script>

<style lang="scss" type="text/css">
@import "../common/css/swiper.min.css";
.swiper-slide{
	img{
		width: 100%;
	}
}
</style>